<template>
  <div class="content">
    <van-sticky>
      <van-nav-bar
        @click-left="$router.back()"
        left-arrow
        title="基本信息"
      ></van-nav-bar>
    </van-sticky>
    <div class="main">
      <div class="main-header">
        <van-cell title="头像" is-link>
          <template #right-icon>
            <img
              style="margin-top: -5px"
              :src="$publicObj.urlImg(userInfo.image)"
              alt=""
            />
          </template>
        </van-cell>
        <van-cell
          :value="userInfo.name"
          is-link
          @click="$router.push({ path: '/settingname', query: { msg: 1 } })"
        >
          <template #title>
            <span class="custom-title">真实姓名</span>
          </template>
        </van-cell>
        <van-cell :value="userInfo.nickname">
          <template #title>
            <span class="custom-title">微信昵称</span>
          </template>
        </van-cell>
        <van-cell
          :value="userInfo.phone"
          is-link
          @click="$router.push({ path: '/settingname', query: { msg: 2 } })"
        >
          <template #title>
            <span class="custom-title">手机号</span>
          </template>
        </van-cell>
        <van-cell
          :value="userInfo.weChatNo"
          is-link
          @click="$router.push({ path: '/settingname', query: { msg: 3 } })"
        >
          <template #title>
            <span class="custom-title">微信号</span>
          </template>
        </van-cell>
        <label for="upload1" v-if="userInfo.weChatImage == null">
          <van-cell value="未上传" is-link>
            <template #title>
              <span class="custom-title">微信二维码</span>
              <input
                id="upload1"
                style="display: none"
                type="file"
                accept="image/*"
                @change="uploadweixin"
                class="abc"
              />
            </template>
          </van-cell>
        </label>
        <label for="" v-else>
          <van-cell
            value="已上传"
            is-link
            @click="$router.push(`/code?msg=1&image=${userInfo.weChatImage}`)"
          >
            <template #title>
              <span class="custom-title">微信二维码</span>
            </template>
          </van-cell>
        </label>
      </div>

      <div class="main-content">
        <template v-if="userInfo.certification != 1">
          <van-cell
            value="未认证"
            is-link
            @click="$router.push('/certification')"
          >
            <template #title>
              <span class="custom-title">实名认证</span>
            </template>
          </van-cell>
        </template>
        <template v-else>
          <van-cell value="已认证" is-link>
            <template #title>
              <span class="custom-title">实名认证</span>
            </template>
          </van-cell>
        </template>
        <template v-if="userInfo.bankCard != 1">
          <van-cell
            value="未绑定"
            is-link
            @click="$router.push({ path: '/bindbankcard', query: { msg: 1 } })"
          >
            <template #title>
              <span class="custom-title">绑定银行卡</span>
            </template>
          </van-cell>
        </template>
        <template v-else>
          <van-cell
            value="已绑定"
            is-link
            @click="$router.push({ path: '/bindbankcard', query: { msg: 2 } })"
          >
            <template #title>
              <span class="custom-title">绑定银行卡</span>
            </template>
          </van-cell>
        </template>
        <template v-if="userInfo.paymentCode == 'T'">
          <van-cell
            value="已设置"
            is-link
            @click="$router.push('/settingpayPassword')"
          >
            <template #title>
              <span class="custom-title">支付设置</span>
            </template>
          </van-cell>
        </template>
        <template v-else>
          <van-cell
            value="未设置"
            is-link
            @click="$router.push('/settingpayPassword')"
          >
            <template #title>
              <span class="custom-title">支付设置</span>
            </template>
          </van-cell>
        </template>

        <label for="upload2" v-if="userInfo.officialChatImage == null">
          <van-cell value="未上传" is-link>
            <template #title>
              <span class="custom-title">公众号二维码</span>
              <input
                id="upload2"
                style="display: none"
                type="file"
                accept="image/*"
                @change="uplodadgongzonghao"
                class="abc"
              />
            </template>
          </van-cell>
        </label>
        <label for="" v-else>
          <van-cell
            value="已上传"
            is-link
            @click="
              $router.push(`/code?msg=2&image=${userInfo.officialChatImage}`)
            "
          >
            <template #title>
              <span class="custom-title">公众号二维码</span>
            </template>
          </van-cell>
        </label>

        <label for="upload3" v-if="userInfo.businessLicenseImage == null">
          <van-cell value="未上传" is-link>
            <template #title>
              <span class="custom-title">营业执照</span>
              <input
                id="upload3"
                style="display: none"
                type="file"
                accept="image/*"
                @change="uplodyyzz"
                class="abc"
              />
            </template>
          </van-cell>
        </label>
        <label for="" v-else>
          <van-cell
            value="已上传"
            is-link
            @click="
              $router.push(`/code?msg=3&image=${userInfo.businessLicenseImage}`)
            "
          >
            <template #title>
              <span class="custom-title">营业执照</span>
            </template>
          </van-cell>
        </label>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // navRight: true,
      userInfo: {}, //个人信息

      fileList: [], // 展示上传图片

      shareFlag: true, //防止继续点击,
      shareId: "", //分享时 使用id 放在重复点击生成新id
      articleShareId: "", //表单id
      imgShow: false, //封面图片展示
      weChatImage: "",
      agentId: "",
    };
  },
  mounted() {
    this.agentId = sessionStorage.getItem("agentId");
    this.getjibenMsg();
    // 获取个人信息
    this.$store.dispatch("updateUserInfo");
  },
  created() {
    document.querySelector("#app").style.width = "100%";
    document.querySelector("#app").style.height = "100vh";
    document.querySelector("#app").style.backgroundColor = "#f3f5f7";
  },
  methods: {
    async getjibenMsg() {
      await this.$store.dispatch("updateUserInfo");
      this.userInfo = this.$store.state.userInfo;
    },
    async uplodadgongzonghao(e) {
      const file = e.target.files[0] || e.dataTransfer.files[0];
      await this.afterReads(file);
    },
    uploadweixin(e) {
      const file = e.target.files[0] || e.dataTransfer.files[0];
      this.afterRead(file);
    },
    uplodyyzz(e) {
      const file = e.target.files[0] || e.dataTransfer.files[0];
      this.afterReadss(file);
    },

    //上传图片
    afterRead(files) {
      let _this = this;
      //判断是否为图片文件
      if (files.type.indexOf("image") == -1) {
        this.$toast("请上传图片文件");
      } else {
        this.$publicObj.getLoading();
        _this.$publicObj.uploadFile(
          files,
          function(imgData) {
            _this.userInfo.weChatImage = imgData;
            _this.$toast("上传成功");
            _this.$api
              .editUserInfo({
                id: _this.$store.state.userInfo.id,
                weChatImage: imgData,
                account: _this.$store.state.userInfo.account,
              })
              .then((res) => {
                if (res.code == 0) {
                  _this.$toast("保存成功");
                  _this.$router.push("/personal");
                } else {
                  _this.$toast(res.msg);
                }
              });
            _this.$publicObj.closeLoading();
          },
          "/sys/oss/upload"
        );
      }
    },
    //上传图片
    afterReads(files) {
      let _this = this;
      //判断是否为图片文件
      if (files.type.indexOf("image") == -1) {
        this.$toast("请上传图片文件");
      } else {
        this.$publicObj.getLoading();
        _this.$publicObj.uploadFile(
          files,
          function(imgData) {
            _this.userInfo.officialChatImage = imgData;
            _this.$toast("上传成功");
            _this.$api
              .editUserInfo({
                id: _this.$store.state.userInfo.id,
                officialChatImage: imgData,
                account: _this.$store.state.userInfo.account,
              })
              .then((res) => {
                if (res.code == 0) {
                  _this.$toast("保存成功");
                  // _this.$router.push("/personal");
                  _this.$store.dispatch("updateUserInfo");
                  if (_this.$route.query.from) {
                    setTimeout((_) => {
                      _this.$router.replace("/" + _this.$route.query.from);
                    }, 800);
                  }
                } else {
                  _this.$toast(res.msg);
                }
              });
            _this.$publicObj.closeLoading();
          },
          "/sys/oss/upload"
        );
      }
    },
    //上传图片
    afterReadss(files) {
      let _this = this;
      //判断是否为图片文件
      if (files.type.indexOf("image") == -1) {
        this.$toast("请上传图片文件");
      } else {
        this.$publicObj.getLoading();
        _this.$publicObj.uploadFile(
          files,
          function(imgData) {
            _this.userInfo.businessLicenseImage = imgData;
            _this.$toast("上传成功");
            _this.$api
              .editUserInfo({
                id: _this.$store.state.userInfo.id,
                businessLicenseImage: imgData,
                account: _this.$store.state.userInfo.account,
              })
              .then((res) => {
                if (res.code == 0) {
                  _this.$toast("保存成功");
                  _this.$router.push("/personal");
                } else {
                  _this.$toast(res.msg);
                }
              });
            _this.$publicObj.closeLoading();
          },
          "/sys/oss/upload"
        );
      }
    },
    //删除图片
    getDelImg(elIndex) {
      let _this = this;
      document.querySelector(".u_img").style.border =
        "3.5px dashed rgba(153, 153, 153)";

      return (file, name) => {
        let fileIndex = name.index;
        _this.fileList[elIndex].splice(fileIndex, 1);
        _this.userInfo.weChatImage = "";
      };
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .main-header {
    margin-top: 10px;
    img {
      width: 40px;
      height: 40px;
      border-radius: 2em;
    }
  }
  .main-content {
    margin-top: 20px;
  }
}
</style>
